import React, { useEffect, useState } from "react";
import { Space, Table, Tag } from "antd";
import type { TableProps } from "antd";
import { getshoplist, delshoplist } from "../../api";
import { Button, Modal, Popconfirm } from "antd";
interface DataType {
  key: string;
  name: string;
  age: number;
  address: string;
  tags: string[];
}
import dayjs from "dayjs";
import type { PopconfirmProps } from "antd";
import Myform from "./myform";
const Shoplist: React.FC = () => {
  const [datalist, getdatalist] = useState();
  const [datas, setdatas] = useState();
  const getShoplist = async () => {
    let title = await getshoplist();
    let data = title.data.map((item: any) => {
      return {
        ...item,
      };
    });
    getdatalist(data);
    setdatas(data.length);
  };
  useEffect(() => {
    getShoplist();
  }, []);

  const cancel: PopconfirmProps["onCancel"] = (e) => {};
  const [isModalOpen, setIsModalOpen] = useState(false);

  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };
  const [title, settitle] = useState("");
  const [itemobj, setitemobj] = useState({});
  const [current, setcurrent] = useState(1);
  const [pageSize, setpageSize] = useState(2);
  const [total, settotal] = useState(datas);
  const columns: TableProps<DataType>["columns"] = [
    {
      title: "优惠劵名称",
      dataIndex: "couponName",
    },
    {
      title: "优惠劵面值",
      dataIndex: "discountAmount",
    },
    {
      title: "优惠券最低消费",
      dataIndex: "minSpend",
    },
    {
      title: "优惠券有效期限",
      dataIndex: "validityPeriod",
    },
    {
      title: "排序",
      dataIndex: "sortOrder",
    },
    {
      title: "状态",
      dataIndex: "status",
      render: (status) => {
        return (
          <Tag
            bordered={status ? true : false}
            color={status ? "processing" : "error"}
          >
            {status ? "开启" : "结束"}
          </Tag>
        );
      },
    },
    {
      title: "创建时间",
      dataIndex: "createTime",
      render: (createTime) => {
        return dayjs(createTime).format("YYYY-MM-DD HH:mm:ss");
      },
    },
    {
      title: "操作",
      key: "action",
      render: (_, record) => (
        <Space size="middle">
          <Popconfirm
            title="温馨提示"
            description="确认删除吗?"
            onConfirm={async () => {
              await delshoplist(record.id);
              getShoplist();
            }}
            onCancel={cancel}
            okText="确认"
            cancelText="取消"
          >
            <a>删除</a>
          </Popconfirm>
          <a
            onClick={() => {
              showModal();
              settitle("修改");
              setitemobj(record);
            }}
          >
            修改
          </a>
        </Space>
      ),
    },
  ];

  return (
    <div>
      <Button
        type="primary"
        onClick={() => {
          showModal();
          settitle("添加");
          setitemobj({});
        }}
      >
        添加
      </Button>
      <Table<DataType>
        columns={columns}
        dataSource={datalist}
        pagination={{
          current,
          pageSize,
          pageSizeOptions: [2, 4, 6],
          showSizeChanger: true,
          total,
          onChange: (page, pageSize) => {
            setcurrent(page);
            setpageSize(pageSize);
          },
        }}
        rowKey={"id"}
      />
      <Modal
        title={title}
        closable={{ "aria-label": "Custom Close Button" }}
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
        footer={null}
      >
        <Myform
          handleOk={handleOk}
          getShoplist={getShoplist}
          title={title}
          itemobj={itemobj}
          key={new Date().getTime()}
        ></Myform>
      </Modal>
    </div>
  );
};

export default Shoplist;
